<template>
  <el-popover placement="bottom" :width="100" popper-class="version-popover">
    <template #reference>
      <el-button type="info" class="custom-button">
        <span>版本记录</span>
        <template #icon>
          <SvgIcon icon-class="ic_版本记录" />
        </template>
      </el-button>
    </template>
    <div class="version-wrap">
      <div class="version-header">版本记录</div>
      <div class="version-content">
        <ul class="version-ul">
          <li class="version-li li-header">
            <div class="version-name">保存时间</div>
            <div class="version-ope">操作</div>
          </li>
          <li class="version-li" v-for="list in editorStore.versionList" :key="list.conifgId">
            <div class="version-name">
              {{ dayjs(list.createTime).format('YYYY年MM月DD日 HH:mm:ss') }}
            </div>
            <div
              v-if="list.conifgId !== editorStore.sceneDetail?.conifgId"
              class="version-ope"
              @click="viewVersion(list)"
            >
              查看
            </div>
          </li>
        </ul>
      </div>
    </div>
  </el-popover>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router';
import { useEditorStore } from '@/store/editor';

const router = useRouter();
const editorStore = useEditorStore();

const viewVersion = (list: API.Scene.IVersion) => {
  router.push({ path: `/scene/version/${list.activityId}/${list.conifgId}` });
};
</script>

<style lang="less">
.version-popover {
  padding: 0px !important;
  .version-wrap {
    position: relative;
    max-height: calc(100vh - 100px);
    overflow-y: auto;

    .version-header {
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
      border-bottom: 1px solid rgba(154, 154, 154, 0.08);
    }
    .version-content {
      padding: 10px;
      .version-ul {
        .version-li {
          height: 28px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-radius: 4px;
          padding: 0 10px;
          margin-bottom: 4px;
          .version-name {
            color: #161616;
          }
          .version-ope {
            color: #0560fd;
            cursor: pointer;
          }
          &.li-header {
            font-size: 14px;
            font-weight: 400;
            color: #585858;
            .version-ope {
              color: #585858;
              cursor: default;
            }
          }
          &:last-child {
            margin-bottom: 0px;
          }
          &:not([class$='li-header']):hover {
            background: rgba(5, 96, 253, 0.2);
          }
        }
      }
    }
  }
}
</style>
